Оцените работу новичка

[modfop]

Здравствуйте всем. Я начинающий верстальщик, мне 22 года. Изучил HTML, CSS, в javascript еще полностью не вник, и все. Недавно сверстал один бесплатный шаблон для практики, нашел в сети, где то дня 3 или 4 потратил, делая понемногу. Проверял только на пяти браузерах последней версии. Хочется оценки со стороны профессионалов, и конечно же критики по больше, по строже. Этот примерный сайт не доделан до прям рабочего состояния. Сверстан приблизительно. Ну, короче, выставляю на всеобщее обозрение

 

Вот ссылка: 

 

http://mdop.yolox.net/

 

Ссылка на макет (картинка):

 

http://mdop.yolox.net/NatGeo-Redesign.jpg

 

PSD отсюда:

 

http://www.freepsd.ws/104-psd-maket-national-geographic-redesign.html

 

 

P.S.: есть несколько вопросов, со временем буду задавать если кто-нибудь откликнется. 

[Sergik+]

Первая же ошибка, иконки заданы img. Тут вообще по идее спрайты надо делать, сам их не люблю .

Шаблон хороший.

[modfop]

Первая же ошибка, иконки заданы img. Тут вообще по идее спрайты надо делать, сам их не люблю .

Шаблон хороший.

 

Да, спасибо за замечание. Про спрайты знаю но еще не пробовал. А иконки в png давать или как?

[Sergik+]

 

Первая же ошибка, иконки заданы img. Тут вообще по идее спрайты надо делать, сам их не люблю .

Шаблон хороший.

 

Да, спасибо за замечание. Про спрайты знаю но еще не пробовал. А иконки в png давать или как?

 

Я бы png сделал, можете не делать спрайты но на background переделать обязательно.

[cyklop77]

категории не вываливаются в виде списка

слайдер не работает

в поле .in_footer input нужен overflow: hidden . потому что при вводе 100 символов, они выходят справа от сабмит-кнопки 

Edited July 28, 2014 by cyklop77

[modfop]

категории не вываливаются в виде списка

слайдер не работает

в поле .in_footer input нужен overflow: hidden . потому что при вводе 100 символов, они выходят справа от сабмит-кнопки

Спасибо, in_footer input исправил: туда добавил overflow:hidden, и padding справа до сабмитта, а width уменьшил эквивалентно увеличению padding'а справа. А насчет категории и слайдера, насколько я знаю, они реализуются с помощью джаваскрипта, я с этим особо не знаком, не подскажете как сделать

Первая же ошибка, иконки заданы img. Тут вообще по идее спрайты надо делать, сам их не люблю .

Шаблон хороший.

Да, спасибо за замечание. Про спрайты знаю но еще не пробовал. А иконки в png давать или как?

Я бы png сделал, можете не делать спрайты но на background переделать обязательно.

Тоесть лого и все картинки относящиеся к контенту в тег <img>, а все остальные иконки и изображения в background. Все правильно?

[modfop]

И еще вопросы:

1. Я там в большей степени использовал position:аbsolutе, не перебор ли это? Потому что, думаю с этим можно любой макет построить с легкостью чем флоат. И мне кажется такая легкость имеет свои побочные эффекты.

2. При уменьшении или увеличении масштаба браузера (до 75%) макет начинает разваливаться. Эти дефекты тоже надо устранять, если да, то до какого предела масштаба?

3. Проверял на хром, опера, мозилла, ИЕ и сафари. Все браузеры последней версии. Достаточно ли это ибо какое сейчас основное требование к кроссбраузерности?

4. У меня в стайлах все бардак, кажется есть лишние свойства, значения и т.д. Вопрос: надо ли там все привести до идеального порядка для клиента, или главное все работало и в стайлах все было достаточно понятным?

Edited July 28, 2014 by modfop

[Alioven]

скажи,где брал макет? или урок по сайту?
подкинь ссылки пожалуйста,я тоже учусь...
Была б очень благодарна 

[modfop]

скажи,где брал макет? или урок по сайту?

подкинь ссылки пожалуйста,я тоже учусь...

Была б очень благодарна 

 

да пожалуйста

http://freepsd.ws/ 

[Get to heaven]

Валидатор вывел 21 ошибку и 3 предупреждения, думаю нужно начать с этого

[afdw]

http://mdop.yolox.ne...eo-Redesign.jpg

 

Не работает.

[RuslanHeYca4ev]

при уменьшении страницы контент выходит за футер

[Zippovich]

Вообще-то лучше спрайтами - там не сложно - погуглите - зато не раздражает 2 секунды подгрузка картинки на hover.

Визуально:

- поехала иконка календаря под слайдер-картинкой

- шрифт не тот что на макете на некоторых (50%) блоках

HTML:

- если используете html5, то логично и теги использовать оттуда <header>, <footer>, пр.

CSS:

- резет возьмите отсюда: http://necolas.github.io/normalize.css/, не тот что сейчас у Вас

[Sergik+]

Вообще-то лучше спрайтами - там не сложно - погуглите - зато не раздражает 2 секунды подгрузка картинки на hover.

Визуально:

- поехала иконка календаря под слайдер-картинкой

- шрифт не тот что на макете на некоторых (50%) блоках

HTML:

- если используете html5, то логично и теги использовать оттуда <header>, <footer>, пр.

CSS:

- резет возьмите отсюда: http://necolas.github.io/normalize.css/, не тот что сейчас у Вас

html5 вообще никак не связан с <header>, <footer>.

[Zippovich]

 

Вообще-то лучше спрайтами - там не сложно - погуглите - зато не раздражает 2 секунды подгрузка картинки на hover.

Визуально:

- поехала иконка календаря под слайдер-картинкой

- шрифт не тот что на макете на некоторых (50%) блоках

HTML:

- если используете html5, то логично и теги использовать оттуда <header>, <footer>, пр.

CSS:

- резет возьмите отсюда: http://necolas.github.io/normalize.css/, не тот что сейчас у Вас

html5 вообще никак не связан с <header>, <footer>.

 

Вы про что? http://htmlbook.ru/html/footer - смотрим спецификацию кто поддерживает - только html5, то же про <header> - это теги чисто из спецификации html5.

[Sergik+]

Я про то что смысла в новых тегах пока ноль, и кто как хочет тот так и делает разметку.

Кстати он еще и не утвержден.

Edited August 19, 2014 by Sergik+

[Zippovich]

Я про то что смысла в новых тегах пока ноль, и кто как хочет тот так и делает разметку.

Кстати он еще и не утвержден.

Вы что-то путаете - смысл помоему в семантике или не?

Только 95% на нем неутвержденном верстают. Дело ведь не в том утвержден он или нет )

[Sergik+]

 

Я про то что смысла в новых тегах пока ноль, и кто как хочет тот так и делает разметку.

Кстати он еще и не утвержден.

Вы что-то путаете - смысл помоему в семантике или не?

Только 95% на нем неутвержденном верстают. Дело ведь не в том утвержден он или нет )

 

Какая семантика ? Вы вообще в теме хоть ? Не один поисковик еще не обрабатывает эти теги

потому что спецификация не утверждена еще. Да и какая семантика может быть в футэре и хэдере ?

[Zippovich]

Какая семантика ? Вы вообще в теме хоть ? Не один поисковик еще не обрабатывает эти теги потому что спецификация не утверждена еще. Да и какая семантика может быть в футэре и хэдере ?

А при чем здесь поисковик, есть много мест где еще может использоваться семантика. HTML используется не только для desktop. Или вы отрицаете, что слепому человеку будет понятней выражение "Это шапка - в ней есть ссылки такие-то", по сравнению "Это блок с идентификатором header, в котором есть ссылки такие-то". Вот такая семантика может быть в хедере и футере, как это не удивительно. Хотя зачем она вообще нужна эта семантика, лучше потом, когда утвердят стандарт и google будет обрабатывать тег header не дай бог, переделать 100500 сайтов, это же удобнее, чем использовать их сейчас.

[Sergik+]

Так для чего еще семантика если не для поисковиков ? Для меня что

<footer> и что .footer абсолютно одинаково да и для поисковиков тоже.

Что такое семантика, и главное почему так на нее все молятся ?

[Zippovich]

Да никто на нее не молится, можете и дальше использовать .footer, только я не пойму чем Вам плох <footer>. Неужели удобнее писать <div class="footer">, если более понятно в коде (я не говорю о семантике) <footer>.

[Sergik+]

Вы написали выше что html5 подразумевает <footer> и <header> а я говорю что это не так,

как человеку нравится так пускай и пишет.

У меня кстати emmet стоит и я пишу всего .header

Edited August 19, 2014 by Sergik+

[Zippovich]

Это из серии "И в валидаторе можно не проверять" - работает же, а если когда-то развалится - это уже не мои проблемы )

Стандарт HTML5 очень вероятно будет утвержден, хотя это не мешает его использовать уже сейчас везде. Я не вижу причины этого не делать и Вам тоже. И тому кто спрашивает совета.

А делает пусть как удобней, мне пофиг.

У Вас другое мнение? ОК - я не против. Останусь при своем.

[Николя223]

 

Какая семантика ? Вы вообще в теме хоть ? Не один поисковик еще не обрабатывает эти теги потому что спецификация не утверждена еще. Да и какая семантика может быть в футэре и хэдере ?

А при чем здесь поисковик, есть много мест где еще может использоваться семантика. HTML используется не только для desktop. Или вы отрицаете, что слепому человеку будет понятней выражение "Это шапка - в ней есть ссылки такие-то", по сравнению "Это блок с идентификатором header, в котором есть ссылки такие-то". Вот такая семантика может быть в хедере и футере, как это не удивительно. Хотя зачем она вообще нужна эта семантика, лучше потом, когда утвердят стандарт и google будет обрабатывать тег header не дай бог, переделать 100500 сайтов, это же удобнее, чем использовать их сейчас.

 

эм... хм... насколько я помню давно в теме микроразметка уже

[Zippovich]

Микроформаты вы имеете ввиду. Это что-то меняет?

[Николя223]

http://siteclinic.ru/blog/internal-optimization/mikrorazmetka/